<template>
	<view>
		<uni-popup ref="popup" type="bottom">
		    <view class="popup-wrap">
		      <view class="popup-header">
		        <text class="popup-header-item" @click="handleCancel">关闭</text>
		      </view>
		      <view class="popup-content">
		        <view v-if="noData">暂时还没有更多回复内容哦~~</view>
		        <view v-else>
		          <uni-steps 
		            :options="options" direction="column" :active="options.length"></uni-steps>
		        </view>
		      </view>
		    </view>
		  </uni-popup>
	</view>
</template>

<script>
	import {uniPopup, uniSteps} from '@dcloudio/uni-ui'
	export default {
		data() {
			return {

				options:
				[
				  {
				    title:'小张同学：你好小明',
				    desc:'2018-11-11 21:21:21'
				  },
				  {
				    title:'小明同学：你好小张',
				    desc:'2018-11-12 21:21:21'
				  },
				  {
				    title:'小张同学：你的照片拍的好好看',
				    desc:'2018-11-13 21:12:32' 
				  },
				  {
				    title:'小明同学：谢谢夸奖',
				    desc:'2018-11-14 21:12:32'
				  }
				]
			}
		},
		components:{
			uniPopup, uniSteps
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			handleCancel() {
				this.$refs.popup.close()

			}
		}
	}
</script>

<style lang="scss">
    .popup-wrap {
      background-color: #ffffff;
      min-height: 200px;
      .popup-header {
        display: flex;
        flex-direction: row-reverse;
        font-size: 14px;
        color: #666;
        border-bottom: 1px #999 solid;
        .popup-header-item {
          height: 50px;
          line-height: 50px;
          padding: 0 15px;
        }
      }
      .popup-content {
        padding: 10px;
      }
    }
</style>
